<template>
	<view class="content">
		<view class="search-box">
			<image class="search-img" @click="toSearchPage" src="http://localhost:3000/images/搜索.png"></image>
			<input class="search" placeholder="请输入您要搜索的商品" />
		</view>
		<view class="list">
			<scroll-view class="list-menu">
				<view class="list-menu-item" @click="scrollTo('section1')"
					:style="{backgroundColor: toView ==='section1' ? '#fff' : 'transparent',color:toView ==='section1' ? '#ff0000' : '#000000'}">
					脑部抗衰</view>
				<view class="list-menu-item" @click="scrollTo('section2')"
					:style="{backgroundColor: toView ==='section2' ? '#fff' : 'transparent',color:toView ==='section2' ? '#ff0000' : '#000000'}">
					皮肤抗衰</view>
				<view class="list-menu-item" @click="scrollTo('section3')"
					:style="{backgroundColor: toView ==='section3' ? '#fff' : 'transparent',color:toView ==='section3' ? '#ff0000' : '#000000'}">
					代谢抗衰</view>
				<view class="list-menu-item" @click="scrollTo('section4')"
					:style="{backgroundColor: toView ==='section4' ? '#fff' : 'transparent',color:toView ==='section4' ? '#ff0000' : '#000000'}">
					精力抗衰</view>
				<view class="list-menu-item" @click="scrollTo('section5')"
					:style="{backgroundColor: toView ==='section5' ? '#fff' : 'transparent',color:toView ==='section5' ? '#ff0000' : '#000000'}">
					PLUS奢享</view>
			</scroll-view>
			<scroll-view id="scrollViewId" scroll-y="true" class="list-main" :scroll-into-view="toView">
				<view id="section1" class="list-main-item">
					<image src=""></image>
					<view class="title">脑部抗衰</view>
					<view class="option-list">
						<view class="option-item">
							<image src=""></image>
							<view class="title">PQQ</view>
						</view>
						<view class="option-item">
							<image src=""></image>
							<view class="title">PQQ</view>
						</view>
						<view class="option-item">
							<image src=""></image>
							<view class="title">PQQ</view>
						</view>
						<view class="option-item">
							<image src=""></image>
							<view class="title">PQQ</view>
						</view>
					</view>
				</view>
				<view id="section2" class="list-main-item">
					<image src=""></image>
					<view class="title">皮肤抗衰</view>
				</view>
				<view id="section3" class="list-main-item">
					<image src=""></image>
					<view class="title">代谢抗衰</view>
				</view>
				<view id="section4" class="list-main-item">
					<image src=""></image>
					<view class="title">精力抗衰</view>
				</view>
				<view id="section5" class="list-main-item">
					<image src=""></image>
					<view class="title">PLUS奢享</view>
				</view>
				<view class="" style="height: 100vh;">

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				toView: 'section1', // 初始滚动位置  
				scrollTop: '',
			}
		},
		methods: {
			scrollTo(id) {
				this.toView = ""; // 更新 toView 的值以触发滚动  				
				this.toView = id; // 更新 toView 的值以触发滚动  
				// const query = uni.createSelectorQuery().in(this);
				// query
				// 	.select("#" + id)
				// 	.boundingClientRect((data) => {
				// 		console.log("节点离页面顶部的距离为" + data.top);
				// 	})
				// 	.exec();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background-color: #e9e9e9;
		min-height: 100vh;

		.search-box {
			padding: 40rpx 60rpx;
			display: flex;

			.search-img {
				height: 40rpx;
				width: 50rpx;
				padding: 20rpx 30rpx;
				background-color: #ffffff;
				border-radius: 50rpx 0 0 50rpx;
			}

			.search {
				padding-right: 30rpx;
				padding-top: 10rpx;
				padding-bottom: 10rpx;
				width: 100%;
				height: 60rpx;
				background-color: #ffffff;
				border-radius: 0 50rpx 50rpx 0;
			}
		}

		.list {
			display: flex;
			height: calc(100vh - 160rpx);


			.list-menu {
				width: 30vw;
				height: 100%;

				.list-menu-item {
					padding: 20rpx 0;
					padding-left: 30rpx;
				}
			}

			.list-main {
				width: 70vw;
				background-color: #ffffff;
				height: 100%;

				.list-main-item {
					padding: 20rpx 25rpx;

					image {
						width: 100%;
						height: 160rpx;
						background-color: #c9c9c9;
						border-radius: 10rpx;
						margin-bottom: 20rpx;
					}

					.title {
						font-size: 28rpx;
						margin-bottom: 20rpx;
					}

					.option-list {
						width: 100%;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

						.option-item {
							width: 30%;
							padding-bottom: 20rpx;

							image {
								height: 120rpx;
							}

							.title {
								font-size: 28rpx;
								color: #6c6c6c;
							}
						}
					}
				}
			}
		}
	}
</style>